<template>
  <view>
	<view class="navbar">
		
	    <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
	      {{ item.text }}
	    </view>
	</view>
	
		<view class="year-box flex">
			<view class="left" @click="last" />
			<view class="year">{{year}}</view>
			<view class="right" @click="next" />
		</view>
		<view class="flex month-boxs">
			<view class=" month-box" v-for="(item,index) in months" :key="index" @click="changemonth(item,index)">
				<view class="month"  :class="{ blue: monthIndex === index }">{{item.month}}</view>
			</view>
		</view>
		<view v-show="tabCurrentIndex===0">
			<view style="background-color: #0596fd;padding: 20rpx;">
				<view class="content">
					<view class="title flex j-content-between" @click="mydetail">
						<view class="title-left">上下班统计</view>
						<view class="title-right">&gt;</view>
					</view>
					<view class="flex wrap" style="justify-content: space-evenly;">
						<view class="content-box">
							<view>{{date.laterCount}}</view>
							<view>迟到</view>
						</view><view class="content-box">
							<view>{{date.earlierCount}}</view>
							<view>早退</view>
						</view>
						<view class="content-box">
							<view>{{date.missCount}}</view>
							<view>缺卡</view>
						</view>
						<view class="content-box">
							<view>{{date.absentDaySum}}</view>
							<view>缺勤</view>
						</view>
						<view class="content-box">
							<view>{{date.presentDaySum}}</view>
							<view>出勤</view>
						</view>
						<view class="content-box"></view>
						<view class="content-box"></view>
					</view>
				</view>
			</view>
			<view style="background-color: #0596fd;padding: 20rpx;">
				<view class="content">
					<view class="title flex j-content-between">
						<view class="title-left">加班统计</view>
						<view class="title-right" />
					</view>
					<view class="flex wrap" style="justify-content: space-evenly;">
						<view class="content-box">
							<view>{{date.overtimeHourSum}}</view>
							<view>加班时长</view>
						</view>
						<view class="content-box">
							<view>{{date.overtimeDaySum}}</view>
							<view>加班天数</view>
						</view>
						
					</view>
				</view>
			</view>
			<view style="background-color: #0596fd;padding: 20rpx;">
				<view class="content">
					<view class="title flex j-content-between">
						<view class="title-left">假勤统计</view>
						<view class="title-right">&gt;</view>
					</view>
					<view class="flex wrap" style="justify-content: space-evenly;">
						<view class="content-box">
							<view>{{date.laterSignCount}}</view>
							<view>补卡</view>
						</view>
						
						<view class="content-box">
							<view>{{date.missionLeaveDaySum}}</view>
							<view>公出</view>
						</view>
						<view class="content-box">
							<view>{{date.vacationLeaveDaySum}}</view>
							<view>年假</view>
						</view>
						<view class="content-box">
							<view>{{date.accidentLeaveDaySum}}</view>
							<view>事假</view>
						</view>
						<view class="content-box">
							<view>{{ date.illLeaveDaySum }}</view>
							<view>病假</view>
						</view>
						<view class="content-box">
							<view>{{ date.shiftLeaveDaySum }}</view>
							<view>调休</view>
						</view>
						<view class="content-box">
							<view>{{ date.marriageLeaveDaySum }}</view>
							<view>婚假</view>
						</view>
						<view class="content-box">
							<view>{{ date.birthLeaveDaySum }}</view>
							<view>产假</view>
						</view>
						<view class="content-box">
							<view>{{ date.withBirthLeaveDaySum }}</view>
							<view>陪产假</view>
						</view>
						<view class="content-box">
							<view>{{ date.otherLeaveDaySum }}</view>
							<view>其他</view>
						</view>
						<view class="content-box"></view>
						<view class="content-box"></view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="tabCurrentIndex===1">
			<scroll-view :style="{height:curScroll+'px'}"  :show-scrollbar="false" class="scroll-Y" @scrolltolower="scrolltolower" :scroll-top="scrollTop" enhanced scroll-y="true" >
				<report @rowClick="rowclick" :dataList="datelist" :propList="propList" />
			</scroll-view>
		</view>
  </view>
</template>

<script>
	import { self,junior} from "@/service/api/attendance";
	import report from "@/components/report";
	import {debounce, getScreen} from '@/service/auth';
export default {
	components:{report},
    data() {
    	return{
			tabCurrentIndex:0,
			year:new Date().getFullYear(),
			month:new Date().getMonth()+1,
			navList:[
			{text:'我的考勤',},
			{text:'下属考勤',},
			],
			months:[
				{id:1, month:'1月'},
				{id:2, month:'2月'},
				{id:3, month:'3月'},
				{id:4, month:'4月'},
				{id:5, month:'5月'},
				{id:6, month:'6月'},
				{id:7, month:'7月'},
				{id:8, month:'8月'},
				{id:9, month:'9月'},
				{id:10, month:'10月'},
				{id:11, month:'11月'},
				{id:12, month:'12月'},
				],
			monthIndex:new Date().getMonth(),
			date:{},
			datelist:[],
			propList:[
			{prop:'userName',label:'姓名'},
			{prop:'leaveDaySum',label:'请假天数'},
			{prop:'overtimeDaySum',label:'加班天数'},
			{prop:'presentDaySum',label:'出勤'},
			],
			size:999,
            page:1,
			end:false,
			curScroll:0,
			height:0,
			myuserId:''
			
			
		}
    },
	created(){
		const {height}  = getScreen()
      this.curScroll = height - 179
      this.height =  height
			this.getself()
	},
	methods:{
	  tabClick(index) {
				  this.tabCurrentIndex = index;


					this.getself()
			},
			changemonth(item,i){
				this.monthIndex=i
				this.month=item.id
				this.init()
				this.getself()
			},
			init(){
				this.end=false,
				this.page=1,
				this.datelist=[]
			},
			getself(){
				const data={
					year:this.year,
					month:this.month,
					size:this.size,
            		page:this.page
				}
				if(this.tabCurrentIndex===0){
					self(data).then(res=>{
					// console.log(res,'说法')
					this.date=res.data
					this.myuserId=res.data.userId
					uni.showToast({
						title:res.msg,
						icon:'none'
						})
					}).catch(err=>{
						uni.showToast({
							title:err.msg,
							icon:'none'
							})
					})
				}else{
					junior(data).then(res=>{
					if (res.data.content.length < this.size) 
					this.end=true
					this.datelist=res.data.content
					uni.showToast({
						title:res.msg,
						icon:'none'
						})
					}).catch(err=>{
						uni.showToast({
							title:err.msg,
							icon:'none'
							})
					})
				}
				
			},
			last(){
				this.year--
				this.init()
				this.getself()
			},
			next(){
				this.year++
				this.init()
				this.getself()
			},
			rowclick(row){
				uni.navigateTo({
				  url:`/order/personnel/attendance/detail?userId=${row.userId}&year=${this.year}&month=${this.month}`,
			  })
			  console.log(row,'ffffff')
			},
			scrolltolower(){
				console.log('---------------');
				if(this.end)return
				this.page++
				this.getself()
			},
			mydetail(){
				uni.navigateTo({
				  url:`/order/personnel/attendance/mydetail?userId=${this.myuserId}&year=${this.year}&month=${this.month}`,
			  })
			}
	
	}

}
</script>

<style lang="scss" scoped>
.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		position: relative;
		&.current {
			color: #0596fd;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 100%;
				height: 0;
				border-bottom: 2px solid #0596fd;
			}
		}
	}
}

	.year-box{
		    margin: 20rpx 0;
		.left{
			width: 33%;
			text-align: right;
			&::after{
				content:'<'
			}
		}
		.year{
			width: 33%;
			text-align: center;
		}
		.right{
			width: 33%;
			text-align: left;
			&::after{
				content:'>'
			}
		}
	}
	.month-boxs{
		overflow-x: auto;
		.month-box{
			flex-shrink: 0;
			width: 100rpx;
			padding: 20rpx 0;
			// background:red;
			.month{
				// background: darkblue;
				font-size: 15px;
				width:100rpx;
				height: 60rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 60rpx;
			}
			.blue{
				color: white;
				background-color: #0596fd;
			}
			
	}
	
}
.content{
	padding: 20rpx;
	background-color: #fff;
	.title{
		
	}
	.content-box{
		width: 200rpx;
		text-align: center;
		margin: 10px 0;
	}
}

</style>